// 注册
Vue.component('change-page', {
	props: ['current_page', 'page_size', 'page_total'],
	template: '<div style="padding-top: 20px;overflow: hidden;padding-bottom: 10px;">\
  	<div class="col-sm-3" style="float: right;">\
  	<div class="col-sm-5" style="max-width: 100px;">\
  		<span style="position: absolute;left: -2px;top: 7px;">第</span><input type="number" min="1" v-bind:max="page_total" v-model="jump_page" class="form-control col-sm-12 text-center" ><span style="position: absolute;right: -2px; top:7px;"> 页 </span>\
  	</div>\
  	<button type="button" class="btn btn-success" style="float: left;margin-left: 20px;" @click="hrefPage">跳转</button>\
  	</div>\
  		<div class="pull-right" style="margin: 8px 15px;">共<span v-text="page_total"></span>页</div>\
			<ul class="pagination" style="margin-top: 1px;margin-bottom: 0;float: right;">\
				<li class="cursor"><a @click="upPage">&laquo;</a></li>\
				<li><a v-text="current_page"></a></li>\
				<li class="cursor"><a @click="nextPage">&raquo;</a></li>\
			</ul>\
  	</div>',
	data: function() {
		return {
			jump_page: 1
		}
	},
	mounted: function() {
		console.log("当前页:" + this.current_page + "\t")
	},
	methods: {
		//下一页
		nextPage: function() {
			if(this.page_total > this.current_page) {
				this.$emit("page-change", this.current_page + 1, this.page_size);
			}
		},
		//上一页 
		upPage: function() {
			if(this.current_page > 1) {
				this.$emit("page-change", this.current_page - 1, this.page_size);
			}
		},
		//跳转页
		hrefPage: function(curPage, index) {
			if(this.page_total < this.jump_page || this.jump_page < 1)
				return;
			this.$emit("page-change", this.jump_page, this.page_size);
		}
	}
})